<style lang="less" scoped>
  @import "../../../styles/common.less";
</style>

<template>
  <div class="">
    <Row>
      <Col span="24">
      <Card>
        <p slot="title">
          菜单更新
        </p>
        <Row>
          <Col span="24">
          <Form ref="dataInfo" :model="dataInfo" :rules="ruleInline" :label-width="80">
            <FormItem label="菜单路由" prop="name" placeholder="请输入英文...">
              <Input v-model="dataInfo.name"/>
            </FormItem>
            <FormItem label="菜单名称" prop="title">
              <Input v-model="dataInfo.title"/>
            </FormItem>
            <FormItem label="菜单类型" prop="menu_type">
              <RadioGroup v-model="dataInfo.menu_type">
                <Radio :label="item.id" v-for="item in menuTypeList">{{ item.title }}</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="菜单图标" prop="icon">
              <Input v-model="dataInfo.icon"/>
            </FormItem>
            <FormItem label="是否开发者菜单" prop="is_developer">
              <i-switch v-model="dataInfo.is_developer" size="large">
                <span slot="true">是</span>
                <span slot="false">否</span>
              </i-switch>
            </FormItem>
            <FormItem label="菜单描述" prop="remark">
              <Input v-model="dataInfo.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                     placeholder=""></Input>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleSubmit('dataInfo')">
                <span v-if="!submitLoading">提交保存</span>
                <span v-else>正在保存中...</span>
              </Button>
              <Button type="ghost" @click="goHistory" style="margin-left: 8px">返回</Button>
              <Button type="ghost" @click="handleReset('dataInfo')" style="margin-left: 8px">重置</Button>
            </FormItem>
          </Form>
          </Col>
        </Row>
      </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
import util from '@/libs/util.js'
import dataApi from "@/api/system/menu.js"

export default {
  name: 'system-menu-edit',
  data () {
    return {
      // 更新数据编号
      updatedId: 0,
      // 表单信息
      dataInfo: {
        title: '',
        name: '',
        pid: 0,
        menu_type: 2,
        icon: '',
        remark: '',
        is_developer: true,
        sort: 0
      },
      // 菜单类型列表
      menuTypeList: [],
      // 提交按钮加载状态
      submitLoading: false,
      // 验证规则信息
      ruleInline: {
        name: [
          {required: true, validator: this.validateName, trigger: 'blur'}
        ],
        title: [
          {required: true, message: '请输入菜单名称', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    // 验证角色标识
    validateName (rule, value, callback) {
      if (!value) {
        return callback(new Error('请输入菜单路由'))
      } else if (!/^[a-zA-Z\d]+$/.test(value)) {
        return callback(new Error('菜单路由必须是英文'))
      } else {
        callback()
      }
    },
    // 初始化
    init () {
      let vm = this
      dataApi.getMenuTypeList().then(
        res => {
          vm.menuTypeList = res.data
        }
      )
      if (vm.updatedId) {
        dataApi.detail(vm.updatedId).then(
          res => {
            vm.dataInfo = res.data.detail
            vm.dataInfo.is_developer = Number(vm.dataInfo.is_developer)
            vm.dataInfo.is_developer = Boolean(res.data.detail.is_developer)
            vm.dataInfo.menu_type = Number(vm.dataInfo.menu_type)
          }
        )
      }
    },
    handleSubmit (name) {
      let vm = this
      vm.submitLoading = true
      this.$refs[name].validate((valid) => {
        if (valid) {
          return new Promise((resolve, reject) => {
            let params = {
              formData: this.dataInfo
            }
            let result
            if (vm.updatedId) {
              result = dataApi.update(vm.updatedId, params)
            } else {
              result = dataApi.create(params)
            }
            vm.submitLoading = false
            result.then(
              res => {
                vm.$Message.success(res.msg)
                vm.$router.go(-1)
              }
            )
          })
        } else {
          vm.submitLoading = false
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    goHistory () {
      this.$router.go(-1)
    }
  },
  created () {
    var id = this.$route.query.id
    if (!(id === undefined)) {
      this.updatedId = id
    }
    //  上级编号
    this.dataInfo.pid = this.$route.query.pid
    //  如果有id则为更新
    this.init()
  }
}
</script>
